<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人简历练习</title>
</head>
<body>
<table border="1px">
    <caption>个人简介</caption>
    <tr>
        <td>照片:</td>
        <td id="pic_td"></td>
    </tr>
    <tr>
        <td>姓名:</td>
        <td id="name_td"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td"></td>
    </tr>
    <tr>
        <td>好友:</td>
        <td id="friend_td"></td>
    </tr>
</table>
<script>
    let person = {
        name: '传奇哥',
        age: 18,
        friends: ['路飞', '索隆', '娜美'],
        imgUrl: 'img/fcq.jpg'
    };
    // 1.从页面中获取指定单元格
    let picTd = document.getElementById('pic_td');
    let nameTd = document.getElementById('name_td');
    let ageTd = document.getElementById('age_td');
    let friendTd = document.getElementById('friend_td');
    // 2.将上方对象数据的姓名与年龄取出 装入对应的单元格中
    nameTd.innerHTML = person.name;
    ageTd.innerHTML = person.age;
    // 3.1 页面图片元素的插入 需要创建元素对象
    let imgE = document.createElement('img');
    imgE.src = person.imgUrl;
    imgE.width = 100;
    // 3.2 还需要将图片元素装入到td单元格中
    picTd.append(imgE);
    // 4.创建无序列表形式的元素 利用遍历拿取数据对表格进行填充
    let ulE = document.createElement('ul');
    for (let fName of person.friends) {
        // 每遍历出一个名字 就创建一个li对象承接
        let liE = document.createElement('li');
        // 把当前遍历的对象装入li元素中
        liE.innerHTML = fName;
        // 把本轮的完整li元素嵌入ul父级元素中
        ulE.append(liE);
    }
    // 循环结束 将完整的ul元素装入表格中
    friendTd.append(ulE);
</script>
</body>
</html>